<template>
  <div class="goods-item" @click="goodsItemClick">
    <img v-lazy="imgShow" @load="imageLoad">
    <div class="goods-info">
      <p>{{goodsItem.title}}</p>
      <span class="price">{{goodsItem.price}}</span>
      <i class="fas fa-star"></i>
      <span>{{goodsItem.cfav}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "GoodsListItem",
    props: {
      goodsItem:{
        type: Object,
        default: {}
      }
    },
    methods: {
      imageLoad(){
        this.$bus.$emit('imageItemLoad')
      },
      goodsItemClick(){
          this.$router.push('/detail/'+this.goodsItem.iid)
      },

    },
    computed: {
      imgShow(){
        return   this.goodsItem.image || this.goodsItem.show.img
      }
    }
  }
</script>

<style scoped>
.goods-item{
   padding-bottom:40px;
  position: relative;
  width: 49%;
}
.goods-item img{
  width: 100%;
  border-radius: 5px;
}
  .goods-info{
    font-size: 16px;
    text-align: center;
    position: absolute;
    overflow: hidden;
    right: 0;
    left: 0;
    bottom: 0px;
  }
  .goods-info p{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 3px;
  }
  .goods-info .price{
    color: deeppink;
  }

</style>